<template>
  <div>
    <Topnav titleTxt="栏目管理"></Topnav>
    <!-- 点击按钮删除频道 -->
    <TabLanmu lanmuText="点击删除以下频道" :dellist="delList" @delLanmu="delitem"></TabLanmu>
    <!-- 点击添加以下频道 -->
    <TabLanmu lanmuText="点击添加以下频道" :addlist="addList" @addLanmu="additem"></TabLanmu>
  </div>
</template>
<script>
// 引入头部导航
import Topnav from "@/components/TopNav.vue";
import TabLanmu from "@/components/TabLanmu.vue";
export default {
  // 注册组件
  components: {
    Topnav,
    TabLanmu
  },
  data() {
    return {
      addList: [],
      delList: []
    };
  },
  watch: {
    delList(newVal) {
      const dellistArr = JSON.stringify(newVal);
      // 本地存储
      localStorage.setItem("dellist", dellistArr);
    },
    addList(newVal) {
      const addlistArr = JSON.stringify(newVal);
      localStorage.setItem("addlist", addlistArr);
    }
  },
  methods: {
    additem(domText, index) {
      if (this.delList.indexOf(domText) < 0) {
        this.delList.push(domText);
        this.addList.splice(index, 1);
      }
      //添加栏目
      //   this.$axios({
      //     url: "/category",
      //     method: "post",
      //     data: {
      //       name: domText
      //     }
      //   }).then(res => {
      //     console.log("栏目添加成功", res);
      //   });
    },
    delitem(item, index) {
      if (this.delList.length == 1) {
        return this.$toast("至少留下一个");
      }
      this.addList.push(item);
      this.delList.splice(index, 1);
    }
  },
  mounted() {
    //载入前先判断本地有没有这个数据
    if (localStorage.getItem("dellist")) {
      this.addList = JSON.parse(localStorage.getItem("addlist"));
      this.delList = JSON.parse(localStorage.getItem("dellist"));
    } else {
      this.$axios({
        url: "/category",
        method: "get"
      }).then(res => {
        console.log(res);
        const { data } = res.data;
        this.delList = data;
      });
    }
  }
};
</script>
